<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <title>Vue.js 模板</title>
</head>

<body>
    <div id="app">
        <p>1234</p>
    </div>
    <script id="tpl" type="x-template">
        <div class="tpl">

            <p>这是通过script标签得到的模板</p>
            <my-component title="标题" content="内容"></my-component>
            <button v-on:click="alert">alert</button>
            <label><input type="radio" value="male" v-model="gender "/> 男 </label>
                <label><input type="radio" value="female" v-model="gender "/> 女 </label>
                <p>{{ gender }}</p>
                <ul>
                        　<li v-for="item in items">
                        　　<h3>{{item.title}}</h3>
                        　　<p>{{item.description}}</p>
                        　</li>
                        </ul>
        </div>
    </script>
    <script>
        var myComponent = Vue.component('my-component', {
            props: ['title', 'content'],
            template: '<div :title="title"><h1>{{title}}</h1><p>{{content}}</p></div>'
        })

        var data = {
            a: 1,
            gender: 'female',
            items: [
                　　　{ title: 'title-1', description: 'description-1' },
                　　　{ title: 'title-2', description: 'description-2' },
                　　　{ title: 'title-3', description: 'description-3' },
                　　　{ title: 'title-4', description: 'description-4' }
            　　]
        };
        var app = new Vue({
            data: data,
            el: '#app',
            template: '#tpl',
            methods: {
                alert: function () {
                    alert(this.a);
                }
            }
        });
        console.assert(app.$data === data);
        console.assert(app.a === data.a);
        app.a = 2;
        console.assert(data.a == 2)
        data.a = 3;
        console.assert(app.a == 3)
    </script>
</body>

</html>